<template>
    <div id="vue-pdf-view">
        <vue-pdf-embed
            :source="pdfState.pdfSource"
            :page="pdfState.pageNum"
            textLayer
            ref="vuePdfRef"
        />
        <div class="btn">
            <van-button type="success" @click="pageUp">上一页</van-button>
            <van-button type="success" @click="pageDown">下一页</van-button>
            <van-button type="success" @click="PDFDownload"
                >文件下载</van-button
            >
            <van-button type="success" @click="PDFPrint">打印</van-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
// 导入自己的文件
import urlPDF from "./images/aaa.pdf";
const pdfState = reactive({
    pdfSource: {
        url: "/api/content/dam/cc/cn/legal/servicetou/Acrobat-Sign-Additional-Terms-of-Use-zh_CN-20231015.pdf",
        cMapUrl:
            "/api/content/dam/cc/cn/legal/servicetou/Acrobat-Sign-Additional-Terms-of-Use-zh_CN-20231015.pdf",
        cMapPacked: true,
    },
    // 当前页
    pageNum: 1,
    // 总页数
    numPages: 1,
});
const scaleData = ref(1.0);
const pageHeight = ref("100%");

// 放大
function zoomIn() {
    scaleData.value += 0.1;
    pageHeight.value = parseInt(pageHeight.value) - 5.0 + "%";
}
// 缩小
function zoomOut() {
    scaleData.value -= 0.1;
    pageHeight.value = parseInt(pageHeight.value) + 5.0 + "%";
}
// 页面 放大/缩小 还原默认值
function pageRest() {
    scaleData.value = 1.0;
    pageHeight.value = "100%";
}
// 上一页
function pageUp() {
    if (pdfState.pageNum >= 1) {
        pdfState.pageNum--;
    }
    // 当页面位于首页时，再次点击上一页跳转至尾页
    if (pdfState.pageNum == 0) {
        pdfState.pageNum = pdfState.numPages;
    }
}

// 下一页
function pageDown() {
    if (pdfState.pageNum <= pdfState.numPages) {
        pdfState.pageNum++;
    }
    // 当页面位于尾页时，再次点击下一页跳转至首页
    if (pdfState.pageNum > pdfState.numPages) {
        pdfState.pageNum = 1;
    }
}
const vuePdfRef = ref(null);

// -- 获取文件名（用于 文件打印和下载）--
function getPDFFileName() {
    const last_index = pdfState.pdfSource.url.lastIndexOf("/");
    return pdfState.pdfSource.url.slice(last_index + 1);
}

// -- pdf文件下载 --
function PDFDownload() {
    vuePdfRef.value.download(getPDFFileName());
}
// -- pdf文件打印 --
function PDFPrint() {
    vuePdfRef.value.print(100, getPDFFileName(), true);
}
onMounted(async () => {
    const doc = await VuePdfEmbed.getDocument(pdfState.pdfSource.url).promise;
    // 获取文件总页数
    pdfState.numPages = doc.numPages;
    console.log(doc.numPages);
});
</script>
<style>
#vue-pdf-view {
    width: 100%;
    height: 100%;
    text-align: center;

    /* 内容溢出显示滚动条 */
    overflow: scroll;
    /* 隐藏x、y轴滚动条 */
    overflow-y: hidden;
    overflow-x: hidden;
}
.btn {
    position: fixed;
    top: 0;
}
/* 设置滚动栏的宽、高 */
#vue-pdf-view::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 设置滚动条的样式 */
#vue-pdf-view::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #eee;
}

/* 鼠标经过滚动条变换颜色 */
#vue-pdf-view::-webkit-scrollbar-thumb:hover {
    background-color: #cbcbff;
}
</style>
